<template>
  <div class="main-box">
    <div id="globe"></div>
    <div id="inticon" @click="toBigData"><icon iconClass='hulianwang' color="white"/></div>
    <div class="button" @click="involve">点击参与</div>
  </div>
</template>

<script>
import "echarts-gl";

export default {
  data() {
    return {
      chinachart: null,
    };
  },
  mounted() {
    this.chart();
  },
  methods: {
    toBigData(){
    this.$router.push('/bigData')
    },
    involve(){
    this.$router.push('/message')
    },
    chart() {
      var chartDom = document.getElementById("globe");
      var myChart = this.$echarts.init(chartDom);
      // console.log(myChart);
      myChart.setOption({
        // backgroundColor: "#000", //背景颜色
        environment: "none", //背景
        globe: {
          baseTexture: "http://oss.yunstack.ltd/messageBoard/2022-04-2/map.jpg",
          heightTexture: "http://oss.yunstack.ltd/messageBoard/2022-04-2/map.jpg", //地球的高度纹理
          shading: "lambert", //地球中三维图形的着色效果
          displacementScale: 0, //纹理深度 默认为 0
          postEffect: {
            //为画面添加高光，景深，环境光遮蔽（SSAO），调色等效果
            enable: true, //是否开启
            SSAO: {
              //环境光遮蔽
              radius: 1, //环境光遮蔽的采样半径。半径越大效果越自然
              intensity: 1, //环境光遮蔽的强度
              enable: true,
            },
          },
          light: {
            //光照阴影
            main: {
              color: "rgba(170, 46, 42, 0.5)", //光照颜色
              intensity: 3, //光照强度
              shadowQuality: "ultra", //阴影亮度
              shadow: true, //是否显示阴影
              alpha: 40,
              beta: -30,
            },
            ambient: {
              intensity: 4.6,
            },
          },
        },
        series: [
          {
            type: "lines3D",
            coordinateSystem: "globe",
            blendMode: "source-over",
            //轨迹走动
            effect: {
              show: true,
              period: 2,
              trailWidth: 3,
              trailLength: 0.5,
              trailOpacity: 0.8,
              trailColor: "rgba(173, 67, 64, 1)", //路线色
            },
            blendMode: "lighter",
            lineStyle: {
              width: 1,
              color: "rgba(173, 67, 64, 0.5)",
              opacity: 0.2,
            },
            data: [],
            silent: false,
            //3D飞线图
            data: [
              [
                // 七点的经纬度和海拔坐标
                [120, 20, 1],
                [112, 38, 2], // 终点的经纬度和海拔坐标
              ],
              [
                [20, -40, 1],
                [112, 38, 2],
              ],
              [
                [-60, 60, 1],
                [112, 38, 2],
              ],
              [
                [40, 0, 1],
                [112, 38, 2],
              ],
              [
                [-20, 20, 1],
                [112, 38, 2], // 终点的经纬度和海拔坐标
              ],
              [
                [-39, -40, 1],
                [112, 38, 2], // 终点的经纬度和海拔坐标
              ],
              [
                [67, 43, 1],
                [112, 38, 2],
              ],
              [
                [160, -18, 1],
                [112, 38, 2],
              ],
              [
                [145, 66, 1],
                [112, 38, 2],
              ],
              [
                [1790, 42, 1],
                [112, 38, 2],
              ],
            ],
          },
          {
            //地址
            name: "地点标题", //地址标题
            type: "effectScatter",
            coordinateSystem: "bmap",
            type: "scatter3D",
            blendMode: "lighter",
            coordinateSystem: "globe",
            showEffectOn: "render",
            zlevel: 2,
            effectType: "ripple",
            symbolSize: 15,
            rippleEffect: {
              period: 4,
              scale: 4,
              brushType: "fill",
            },
            showEffectOn: "hover",
            hoverAnimation: false,
            label: {
              normal: {
                show: true,
                position: "right",
                formatter: "{b}",
                formatter: function (data) {
                  return data.data.name;
                },
                textStyle: {
                  show: true,
                  fontSize: 14, //地址文字大小
                  color: "rgb(248, 191, 88)", //地址文字颜色
                  fontWeight: "400", //地址文字粗细
                  backgroundColor: "transparent", //地址文字背景
                },
              },
            },
            itemStyle: {
                symbolSize: 2, 
              normal: {
                color: "rgba(29,183,255,0)",
            },

            // 以地址+路线轨迹显示
            data: [
              {
                name: "太原",
                value: [112.11, 38.15],
              },
              {
                name: "上海",
                value: [117.11, 34.15],
              },
              // {
              //   name: "遵义-习水-桑木-大房子",
              //   value: [106.335917, 28.241228],
              // },
              {
                name: "海口",
                value: [110.187707, 20.061778],
              },
              {
                name: "东京",
                value: [139.660177, 35.860783],
              },
              {
                name: "皇后镇",
                value: [168.654317, -44.872951],
              },
              {
                name: "路路阿堡",
                value: [22.4418, -5.85703],
              },
              {
                name: "巴格达",
                value: [44.553051, 33.692094],
              },
              {
                name: "圣地亚哥",
                value: [-70.692216, -33.438525],
              },
              {
                name: "拉斯维加斯",
                value: [-115.149284, 36.187715],
              },
              {
                name: "格林兰",
                value: [-42.406372, 71.973095],
              },
              {
                name: "夏威夷",
                value: [-155.589933, 19.901194],
              },
            ],
          },
          }
        ],
      });
    },
  },
};
</script>

<style lang="less" scoped>
.main-box {
  position: relative;
  margin-top: 63px;
  width: 781px * @topx;
  height: 756px * @topx;
  // background: red;
}
#inticon{
    position: absolute;
    top:40px;
    left: 550px;

}
#globe {
  width: 85%;
  height: 75%;
  margin-top: -20px;
  overflow: hidden;
}
.button{
    position: relative;
    left: -40px;
    width: 200px;
    height: 50px;
    text-align: center;
    border-radius:10px;
    background: #BC2D3B;
    margin: 40px auto;
    line-height: 50px;
    color: white;
    cursor: default;
}
</style>